<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <style>
    .completed {
      text-decoration: line-through;
    }

    .todo {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <small>{{ title }}</small>
    <ul>
      <li
        class="todo"
        v-for="(todo, index) in todoList"
        :class="{ completed: todo.completed }"
        @click="changeTodoStatus(todo, index)"
      >
        {{ todo.text }}
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: '张',
        lastname: '🈲️',
        title: '一个简单的TODO功能',
        todoList: [
          {
            text: '明天去洗澡',
            completed: false,
          },
          {
            text: '早上跑步',
            completed: true,
          },
          {
            text: '下午看完视频',
            completed: false,
          },
          {
            text: '晚上跑步',
            completed: false,
          },
        ],
      },
      computed: {
        newName() {
          return this.firstName + this.lastname + new Date()
        },

      },
      methods: {
        changeTodoStatus(todo, index) {
          var newTodo = {
            text: todo.text,
            completed: !todo.completed,
          }
          this.todoList.splice(index, 1, newTodo)
        },
      },
    })
  </script>
</body>
</html>
